/**
 * Created by mapbar_front on 2019/8/11.
 */
import React,{Component} from 'react';
const img = require('./../../images/timg.jpeg');

class Cat extends Component{
    render(){
        const mouse = this.props.mouse;
        return(
            <div>
                <img src={img}
                     style={{ position: 'absolute', left: mouse.x, top: mouse.y }}
                />
            </div>
        )
    }
}

class Mouse extends Component{
    constructor(props){
        super(props);
        this.state = {
            x:0,
            y:0,
        }
    }
    mouseMove=(event)=>{
        this.setState({
            x: event.clientX,
            y: event.clientY,
        })
    }
    render(){
        return(
            <div style={{height:'100%'}} onMouseMove={this.mouseMove}>
                {this.props.render(this.state)}
            </div>
        )
    }
}

class RenderProps2 extends Component{
    render(){
        return(
            <div>
                RenderProps2
                <Mouse render={mouse=>(
                    <Cat mouse={mouse}/>
                )}/>
            </div>
        )
    }
}
export default RenderProps2;
